<template>
    <div>
        <common-banner name="现货库存" en-name="Stock List"></common-banner>
        <div class="page-center">
            <div class="breadcrumb">
                <el-breadcrumb separator-class="el-icon-arrow-right" class="mt-20 mb-20">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item :to="{ path: '/products' }">杂质对照品</el-breadcrumb-item>
                    <el-breadcrumb-item>{{ productItem.name }}</el-breadcrumb-item>
                </el-breadcrumb>
            </div>

            <div class="detail-container">
                <div class="left-section">
                    <img :src="productItem.img" :alt="productItem.name" />
                </div>
                <div class="right-section">
                    <h2>{{ productItem.name }}</h2>
                    <div class="detail-text">
                        <p>货号:{{ productItem.productNo }}</p>
                        <p>品名:{{ productItem.name }}</p>
                        <p>英文品名:{{ productItem.englishName }}</p>
                        <p>CAS#:{{ productItem.cas }}</p>
                        <p>分子式:{{ productItem.formula }}</p>
                        <p>分子量:{{ productItem.weight }}</p>
                    </div>
                </div>
            </div>

            <div class="line mt-20 mb-20"></div>

            <div class="other-product">
                <a
                    :href="
                        productPreItem && productPreItem.id
                            ? `/product-detail?id=${productPreItem.id}`
                            : 'javascript:void(0)'
                    "
                    ><i class="el-icon-top"></i>上一个: {{ (productPreItem && productPreItem.name) || '无' }}</a
                >
            </div>
            <div class="other-product mb-40">
                <a
                    :href="
                        productNextItem && productNextItem.id
                            ? `/product-detail?id=${productNextItem.id}`
                            : 'javascript:void(0)'
                    "
                    ><i class="el-icon-bottom"></i>下一个: {{ (productNextItem && productNextItem.name) || '无' }}</a
                >
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref } from 'vue'
import CommonBanner from '@/components/CommonBanner.vue'
const productItem = ref({
    id: 1,
    productNo: 'T18489',
    name: '托吡卡胺EP杂质B（旋转异构体混合物）',
    englishName: 'Tropicamide EP Impurity B(Mixture of Rotamers)',
    cas: '57322-50-6',
    formula: 'C17H18N2O',
    weight: 266.34,
    img: require('@/assets/imgs/T18489.jpg'),
})
const productPreItem = ref({
    id: 1,
    productNo: 'T18489',
    name: '托吡卡胺EP杂质B（旋转异构体混合物）',
    englishName: 'Tropicamide EP Impurity B(Mixture of Rotamers)',
    cas: '57322-50-6',
    formula: 'C17H18N2O',
    weight: 266.34,
    img: require('@/assets/imgs/T18489.jpg'),
})
const productNextItem = ref(null)
</script>
<style lang="scss" scoped>
.detail-container {
    display: flex;
    .left-section img {
        width: 300px;
        height: 300px;
    }

    .right-section {
        h2 {
            font-size: 18px;
            color: #535353;
            padding: 5px 0 15px 5px;
            border-bottom: #eeeeee 1px solid;
        }

        .detail-text {
            line-height: 36px;
            font-size: 16px;
            font-family: 'SimSun';
            color: #5a5a5a;
        }
    }
}

.line {
    height: 50px;
    border: 1px solid #e5e5e5;
}

.other-product {
    a {
        font-family: 'SimSun';
        color: #444;
        font-size: 16px;
        i {
            font-weight: 800;
        }
        &:hover {
            color: #47cdff;
        }
    }
}

@media (max-width: 768px) {
    .page-center {
        width: auto !important;
    }
    .breadcrumb {
        margin-left: 10px;
    }

    .detail-container {
        padding: 20px 16px 0 16px;
        display: block;
        .left-section {
            float: none !important;
            text-align: center;
        }
        .right-section {
            float: none !important;
        }
    }
}
</style>
